<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
		<title>充值中心</title>
		<script type="text/javascript" src="../layui/layui.js"></script>
		<link rel="stylesheet" href="../layui/css/layui.css">
		<link rel="stylesheet" type="text/css" href="../css/backer/RechargeCenter.css"/>
		<script src="../js/jquery-1.12.4.js"></script>
	</head>
	<body>
		<div class="head-div">
			<i class="layui-icon layui-icon-dollar">&nbsp;充值中心</i>
		</div>
		<div class="maintemplate"><br /><br />
			<ul>
				<li class="blues" ht="750">金币充值</li>
				<li ht="730">积分充值</li>
				<li ht="350">支付明细</li>
				<li ht="330">积分记录</li>
				<li ht="265">兑换金币</li>
				<div></div>
			</ul>
			<hr class="gray-line" />
			<div class="divnext">
				<br />
				<!--金币充值-->
				<div href="#" class="indiv" name="a1" style="display: block;">
					<form id="goldrecharge">
						<div class="vipchooescard">
							<p>
								<i class="layui-icon layui-icon-tips"></i>  您目前拥有金币<span th:text="${session.user.gold}">100</span>个
							</p>
						</div>
						<!--充值套餐--><br />
						<p class="p-message">选择充值套餐：</p><br />
						<div>
							<div class="SetMeal" name="SetMeal" v="10" p="10">
								<div class="SetMeal-div-first">10</div>
								<div class="SetMeal-div-last">
									￥10
								</div>
							</div>
							<div class="SetMeal" name="SetMeal" v="49.8" p="50">
								<div class="SetMeal-div-first">50</div>
								<div class="SetMeal-div-last">
									￥49.8
								</div>
							</div>
							<div class="SetMeal" name="SetMeal" v="90" p="100">
								<div class="SetMeal-div-first">100</div>
								<div class="SetMeal-div-last">
									￥90
								</div>
							</div>
							<div class="SetMeal" name="SetMeal" v="280" p="300">
								<div class="SetMeal-div-first">300</div>
								<div class="SetMeal-div-last">
									￥280
								</div>
							</div>
							<div class="SetMeal" name="SetMeal" v="480" p="520">
								<div class="SetMeal-div-first">520</div>
								<div class="SetMeal-div-last">
									￥480
								</div>
							</div>
							<div class="SetMeal" name="diy" hts="880" ht="750">
								<div class="SetMeal-div-first">自定义<i class="layui-icon layui-icon-down icons" v="1"></i></div>
							</div>
						</div>
						<!--充值金币--><br />
						<div class="inputgold"><br /><br />
							<p class="p-message">请输入要充值的金币数:</p><br />
							<p>
								<input class="inputgoldss" oninput ="value=value.replace(/[^\d]/g,'')" placeholder="请输入要充值的金币数" maxlength="6" />
								(当前金币为：<span th:text="${session.user.gold}"></span>)
							</p>
						</div>
						<div class="ActualPayment">
							<br/><br/>
							<p>实际应付&nbsp;<span class="money" >0</span>&nbsp;元(您选择了<span class="pays">支付宝</span>支付，目前余额：<span name="balance" th:text="${session.user.balance}"></span>)</p>
							<input name="paymentBalance" class="pb" hidden>
							<input name="buygold" class="buygold" hidden>
						</div>
						<!--支付方式-->
						<div class="paytype"><br /><br />
							<p>请选择付款方式：</p>
							<span><input type="radio" name="paymentWay" class="payment1" checked="checked" p="支付宝" value="支付宝"/>  <span class="zfb">支付宝</span></span>
							<span><input type="radio" name="paymentWay" class="payment1" p="微信" value="微信"/>   <span class="wx">微信</span></span>
							<br /><br />
						</div><br />
						<div class="needtopay"><br />
							<input class="upgrade" id="recharge1" type="button" value="确认充值" />
						</div>
						<div class="detailsdiv"><br />
							<p>1：金币充值最小金额：1元，充值后不可退款，不可提现。</p>
							<p>2：金币可直接用于会员升级、续费、信息置顶推广、精选房源等操作。</p>
							<p>3：余额可兑换为金币，比例为1：1。余额可提现，但需要扣除相应的第三方支付平台提现手续费，敬请注意。</p>
							<p>4：充值如遇问题可拨打客服电话：400-600-0716</p>
						</div>
						<input hidden name="rechargeRemark" value="购买了金币">
					</form>
				</div>

				<!--充值积分-->
				<div href="#" class="indiv" name="a2">
					<form id="pointrecharge">
						<div class="vipchooescard">
							<p>
								<i class="layui-icon layui-icon-tips"></i>  您目前的积分为<span th:text="${session.user.integral}">  </span>
							</p>
						</div>
						<br />
						<p class="p-message">选择充值套餐：</p><br />
						<div>
							<div class="SetMeal" name="SetMeal" v="49.9" p="5000">
								<div class="SetMeal-div-first">5000</div>
								<div class="SetMeal-div-last">
									￥49.9
								</div>
							</div>
							<div class="SetMeal" name="SetMeal" v="98.9" p="10000">
								<div class="SetMeal-div-first">10000</div>
								<div class="SetMeal-div-last">
									￥98.9
								</div>
							</div>
							<div class="SetMeal" name="SetMeal" v="295.9" p="30000">
								<div class="SetMeal-div-first">30000</div>
								<div class="SetMeal-div-last">
									￥295.9
								</div>
							</div>
							<div class="SetMeal" name="SetMeal" v="480.9" p="50000">
								<div class="SetMeal-div-first">50000</div>
								<div class="SetMeal-div-last">
									￥480.9
								</div>
							</div>
							<div class="SetMeal" name="diy" hts="830" ht="730">
								<div class="SetMeal-div-first">自定义<i class="layui-icon layui-icon-down icons" v="1"></i></div>
							</div>
						</div>
						<br />
						<div class="inputpoint"><br /><br />
							<p class="p-message">请输入要充值的积分:</p><br />
							<p>
								<input class="inputgoldss" oninput ="value=value.replace(/[^\d]/g,'')" placeholder="请输入要充值的金币数" maxlength="6" />
								(当前积分为：<span th:text="${session.user.integral}"></span>)
							</p>
						</div>
						<div class="ActualPayment">
							<br/><br/>
							<p>实际应付&nbsp;<span class="money2" >0</span>&nbsp;元(您选择了<span class="payss">支付宝</span>支付，目前余额：<span name="balance2" th:text="${session.user.balance}"></span>)</p>
							<input name="paymentBalance" class="pb2" hidden>
							<input name="buypoint" class="buypoint" hidden>
						</div>
						<!--支付方式-->
						<div class="paytype"><br /><br />
							<p>请选择付款方式：</p>
							<span><input type="radio" name="paymentWay" class="payment2" checked="checked" p="支付宝" value="支付宝"/>  <span class="zfb">支付宝</span></span>
							<span><input type="radio" name="paymentWay" class="payment2" p="微信" value="微信"/>   <span class="wx">微信</span></span>
							<br /><br />
						</div><br />
						<div class="needtopay"><br />
							<input class="upgrade" id="recharge2" type="button" value="确认充值" />
						</div>
						<div class="detailsdiv2"><br />
							<p>1：积分充值最小金额：1元，充值后不可退款，不可提现。</p>
							<p>2：积分可用于信息刷新。</p>
							<p>3：充值如遇问题可拨打客服电话：400-600-0716</p>
						</div>
						<input hidden name="rechargeRemark" value="购买了积分">
					</form>
				</div>




				<div href="#" class="indiv" name="a3">
					<table id="demo1" lay-filter="test" style="" ></table>
				</div>

				<div href="#" class="indiv" name="a4">
					<table id="demo2" lay-filter="test" style="" ></table>
				</div>

				<div href="#" class="indiv" name="a5">
					<!--充值金币--><br />
					<form id="form3">
						<div class="inputpoint2">
							<p>
								兑换数量:&nbsp;<input type="number" id="gold" class="inputgoldss" oninput ="value=value.replace(/[^\d]/g,'')" placeholder="请输入要充值的金币数" maxlength="6" />(当前余额为：<span class="b" th:text="${session.user.balance}"></span>)
							</p>
							<div class="deleterecord2">
								<p style="margin: 10px 0px 0px 65px;">(1余额可以兑换一个金币)</p>
								<button id="begin">开始兑换</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</body>
	<script>
		$("#begin").click(function(){
			if($("#gold").val()==0){
				alert("请输入金币数量 💴");
			}else if ($(".b").text()<$("#gold").val()){
				alert("余额不够  :(");
			}else{
				$.ajax({
					url:'http://localhost:8080/recharge/t',
					type:'post',
					data: {"gold":$("#gold").val()},
					dataType:'json',
					success:function(data){
						if(data){
							alert("金币兑换成功 :)！");
							location.href="http://localhost:8080/backer/rechargeCenter";
						}else{
							alert("金币兑换失败 :(！");
						}
					}
				})
			}

		})





		layui.use('table', function(){
			var table = layui.table;

			//第一个实例
			table.render({
				elem: '#demo1'
				,height: 240
				,limit:4
				,url: 'http://localhost:8080/recharge/list1' //数据接口
				,page : { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
					layout : ['prev', 'page', 'next' ], //自定义分页布局
					groups : 2, //只显示 3 个连续页码
					first : '首页', //首页
					prev : '上一页',
					next : '下一页',
					last : '尾页', //尾页
					curr : 1, //第几页，默认值是1
					align:'right',
					theme:'text-align:right;'
				},cols:
						[
							[ //表头
								{field: 'pid', title: 'ID', align:'center'}
								,{field: 'paymentBalance', title: '充值金额', align:'center'}
								,{field: 'paymentWay', title: '支付方式', align:'center'}
								,{field: 'rechargeRemark',title: '描述', align:'center'}
								,{field: 'rechargeIp', title: 'IP', align:'center'}
								,{field: 'rechargeTime',title: '支付时间', align:'center'}
							]
						]
			});

		});



		layui.use('table', function(){
			var table = layui.table;

			//第一个实例
			table.render({
				elem: '#demo2'
				,height: 202
				,limit:3
				,url: 'http://localhost:8080/recharge/list2' //数据接口
				,page : { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
					layout : ['prev', 'page', 'next' ], //自定义分页布局
					groups : 2, //只显示 3 个连续页码
					first : '首页', //首页
					prev : '上一页',
					next : '下一页',
					last : '尾页', //尾页
					curr : 1, //第几页，默认值是1
					align:'right',
					theme:'text-align:right;'
				},cols:
						[
							[ //表头
								{field: 'gid', title: 'ID', align:'center'}
								,{field: 'numberChange', title: '积分变化', align:'center'}
								,{field: 'goldRemark', title: '描述', align:'center'}
								,{field: 'updateTime',title: '变化时间', align:'center'}
							]
						]
			});

		});




		$("#recharge1").click(function(){
			if ($(".money").text()==0){
				alert("请选择或输入金额！");
			}else if ($(".money").text()>$("[name=balance]").text()){
				alert("余额不够！");
			}else{
				$.ajax({
					url:'http://localhost:8080/recharge/rhg',
					type:'post',
					data:$("#goldrecharge").serialize(),
					dataType:'json',
					success:function(data){
						if(data){
							alert("金币充值成功 :)！")
							location.href="http://localhost:8080/backer/rechargeCenter";
						}else{
							alert("金币充值失败 :(！");
						}
					}

				})
			}
		})

		$("#recharge2").click(function(){
			if ($(".money2").text()==0){
				alert("请选择或输入金额！");
			}else if ($(".money2").text()>$("[name=balance2]").text()){
				alert("余额不够！");
			}else{
				$.ajax({
					url:'http://localhost:8080/recharge/rhg2',
					type:'post',
					data:$("#pointrecharge").serialize(),
					dataType:'json',
					success:function(data){
						if(data){
							alert("积分充值成功 :)！");
							location.href="http://localhost:8080/backer/rechargeCenter";
						}else{
							alert("积分充值失败 :(！");
						}
					}

				})
			}
		})

		$(".payment1").click(function(){
			$(".pays").text($(this).val());
			$(".pb").val($(".money").text());
			$(".pb2").val($(".money2").text());
		})

		$(".payment2").click(function(){
			$(".payss").text($(this).val());
			$(".pb").val($(".money").text());
			$(".pb2").val($(".money2").text());
		})


		$("[name=SetMeal]").click(function(){
			$(".money").text($(this).children().next().text());
			$(".pb").val($(".money").text());
			$(".pb2").val($(".money2").text());
		})
		$("[name=paytype]").click(function(){
			$(".pays").text($(this).attr("p"));
			$(".pb").val($(".money").text());
			$(".pb2").val($(".money2").text());
		})
		$("[name=paytypepoint]").click(function(){
			$(".payss").text($(this).attr("p"));
			$(".pb").val($(".money").text());
			$(".pb2").val($(".money2").text());
		})
		$(".inputgoldss").keydown(function(){
			$(".money").text($(this).val());
			$(".money2").text($(this).val());
			$(".pb").val($(".money").text());
			$(".pb2").val($(".money2").text());
		})
		$("[name=diy]").click(function(){
			if($(".icons").attr("v")=="1"){
				$(".icons").removeClass("layui-icon-down");
				$(".icons").addClass("layui-icon-up");
				$(".icons").attr("v","0");
				$(".inputgold").css("display","block");
				$(".inputpoint").css("display","block");
				$(".maintemplate").css("height",$(this).attr("hts")+"px");
			}else{
				$(".icons").removeClass("layui-icon-up");
				$(".icons").addClass("layui-icon-down");
				$(".icons").attr("v","1");
				$(".inputgold").css("display","none");
				$(".inputpoint").css("display","none");
				$(".maintemplate").css("height",$(this).attr("ht")+"px");
			}
		})
		$(".SetMeal").click(function(){
			$(this).addClass("border-color-blue");
			$(this).siblings().removeClass("border-color-blue");
			/*$(".integral").text($(this).attr("v"));*/
			$(".buygold").val($(this).attr("p"));
			$(".buypoint").val($(this).attr("p"));
			$(".money").text($(this).attr("v"));
			$(".money2").text($(this).attr("v"));
			$(".pb").val($(".money").text());
			$(".pb2").val($(".money2").text());
		});
		
		$(".maintemplate ul li").click(function(){
			$(".maintemplate ul div").animate({"left":$(this).index()*100+"px"},300);
			$(".divnext").children("div").hide();
			$(".divnext").children("div").eq($(this).index()).show();
			$(".maintemplate").css("height",$(this).attr("ht")+"px");
			$(this).siblings().removeClass("blues");
			$(this).addClass("blues");
			$(".inputgold").css("display","none");
			$(".inputpoint").css("display","none");
			$(".icons").removeClass("layui-icon-up");
			$(".icons").addClass("layui-icon-down");
			$(".icons").attr("v","1");
			$(".SetMeal").addClass("border-color-blue");
			$(".SetMeal").siblings().removeClass("border-color-blue");
			$(".money").text("0");
			
		});


	</script>
</html>
